<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="platform-announcements.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">公告详情</h1>
                <button onclick="shareAnnouncement()" class="text-white">
                    <i class="fas fa-share text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-120px)] overflow-y-auto pb-24">
            <div class="p-4">
                <!-- Announcement Header -->
                <div class="bg-gradient-to-r from-red-50 to-orange-50 border border-red-200 rounded-xl p-4 mb-6">
                    <div class="flex items-center mb-3">
                        <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full mr-3">热门</span>
                        <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded-full">活动促销</span>
                    </div>
                    <h1 id="announcement-title" class="text-lg font-bold text-gray-800 mb-2">双11大促报名开启</h1>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-calendar mr-2"></i>
                        <span id="announcement-date">2025-01-05 10:30</span>
                        <span class="mx-3">•</span>
                        <i class="fas fa-eye mr-2"></i>
                        <span>阅读量: 12,580</span>
                    </div>
                </div>

                <!-- Announcement Content -->
                <div class="bg-white rounded-xl p-4 shadow-sm mb-6">
                    <div id="announcement-content" class="prose prose-sm max-w-none">
                        <h3 class="text-base font-semibold mb-3 text-gray-800">活动概述</h3>
                        <p class="text-sm text-gray-700 mb-4 leading-relaxed">
                            2025年双11购物节商家报名通道现已正式开放！这是一年中最重要的购物节，也是商家们展示实力、提升销量的黄金机会。
                        </p>

                        <h3 class="text-base font-semibold mb-3 text-gray-800">参与福利</h3>
                        <ul class="text-sm text-gray-700 mb-4 space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>平台流量扶持：参与商家将获得首页推荐位展示机会</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>广告费用减免：推广费用最高可享受50%优惠</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>佣金减免：活动期间佣金费率降低至2.5%</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>专属客服：配备活动专员一对一服务</span>
                            </li>
                        </ul>

                        <h3 class="text-base font-semibold mb-3 text-gray-800">参与条件</h3>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
                            <ul class="text-sm text-blue-700 space-y-1">
                                <li>• 店铺等级达到3级及以上</li>
                                <li>• 近30天好评率不低于95%</li>
                                <li>• 承诺活动期间库存充足</li>
                                <li>• 同意遵守活动规则和价格政策</li>
                            </ul>
                        </div>

                        <h3 class="text-base font-semibold mb-3 text-gray-800">重要时间节点</h3>
                        <div class="space-y-3 mb-4">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-red-500 rounded-full mr-3"></div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-800">报名截止：2025年1月15日 23:59</p>
                                    <p class="text-xs text-gray-500">逾期无法参与活动</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-orange-500 rounded-full mr-3"></div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-800">活动预热：2025年1月20日-1月24日</p>
                                    <p class="text-xs text-gray-500">商品预售和预约购买</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-800">正式活动：2025年1月25日-1月27日</p>
                                    <p class="text-xs text-gray-500">三天狂欢，全场优惠</p>
                                </div>
                            </div>
                        </div>

                        <h3 class="text-base font-semibold mb-3 text-gray-800">注意事项</h3>
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-4">
                            <p class="text-sm text-yellow-800 mb-2">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                <strong>重要提醒</strong>
                            </p>
                            <ul class="text-sm text-yellow-700 space-y-1">
                                <li>• 报名名额有限，先到先得</li>
                                <li>• 报名成功后不可随意退出</li>
                                <li>• 活动期间需保证充足库存</li>
                                <li>• 违规操作将取消参与资格</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="space-y-3 mb-6">
                    <button onclick="joinActivity()" class="w-full bg-gradient-to-r from-red-500 to-orange-500 text-white py-3 rounded-xl font-medium text-lg shadow-lg hover:shadow-xl transition-shadow">
                        <i class="fas fa-rocket mr-2"></i>立即报名参加
                    </button>
                    <div class="grid grid-cols-2 gap-3">
                        <button onclick="contactSupport()" class="bg-blue-100 text-blue-600 py-3 rounded-lg font-medium hover:bg-blue-200 transition-colors">
                            <i class="fas fa-headset mr-2"></i>咨询客服
                        </button>
                        <button onclick="viewRules()" class="bg-gray-100 text-gray-600 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                            <i class="fas fa-file-alt mr-2"></i>查看规则
                        </button>
                    </div>
                </div>

                <!-- Related Announcements -->
                <div class="bg-white rounded-xl p-4 shadow-sm">
                    <h3 class="text-base font-semibold mb-3 text-gray-800">相关公告</h3>
                    <div class="space-y-3">
                        <div onclick="viewAnnouncementDetail('202501040002')" class="flex items-center p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                            <i class="fas fa-bell text-blue-500 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">商家服务协议更新通知</p>
                                <p class="text-xs text-gray-500">2025-01-04</p>
                            </div>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                        <div onclick="viewAnnouncementDetail('202501020005')" class="flex items-center p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                            <i class="fas fa-graduation-cap text-purple-500 mr-3"></i>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">商家培训课程上线</p>
                                <p class="text-xs text-gray-500">2025-01-02</p>
                            </div>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200">
            <div class="flex justify-around py-2">
                <a href="home-b2c.html" class="flex-1 text-center py-2">
                    <i class="fas fa-home text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">首页</p>
                </a>
                <a href="b2b-dashboard.html" class="flex-1 text-center py-2">
                    <i class="fas fa-chart-bar text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">数据</p>
                </a>
                <a href="merchant-entry.html" class="flex-1 text-center py-2 relative">
                    <div class="w-12 h-12 mx-auto -mt-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full flex items-center justify-center shadow-lg">
                        <i class="fas fa-plus text-white text-lg"></i>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">入驻</p>
                </a>
                <a href="logistics-hub.html" class="flex-1 text-center py-2">
                    <i class="fas fa-truck text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">物流</p>
                </a>
                <a href="merchant-center.html" class="flex-1 text-center py-2">
                    <i class="fas fa-store text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">我的</p>
                </a>
            </div>
        </div>
    </div>

    <script>
        // Get announcement ID from URL parameter
        function getAnnouncementId() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('id') || '202501050001';
        }

        // Load announcement content based on ID
        function loadAnnouncementContent() {
            const announcementId = getAnnouncementId();
            
            // Sample announcement data (in a real app, this would come from an API)
            const announcements = {
                '202501050001': {
                    title: '双11大促报名开启',
                    date: '2025-01-05 10:30',
                    content: 'default' // Use the default content already in HTML
                },
                '202501040002': {
                    title: '商家服务协议更新通知',
                    date: '2025-01-04 16:20',
                    content: 'policy'
                },
                '202501040003': {
                    title: '新增商品批量编辑功能',
                    date: '2025-01-04 14:15',
                    content: 'feature'
                },
                '202501030004': {
                    title: '系统维护通知',
                    date: '2025-01-03 18:30',
                    content: 'maintenance'
                },
                '202501020005': {
                    title: '商家培训课程上线',
                    date: '2025-01-02 10:45',
                    content: 'training'
                }
            };

            const announcement = announcements[announcementId];
            if (announcement) {
                document.getElementById('announcement-title').textContent = announcement.title;
                document.getElementById('announcement-date').textContent = announcement.date;
                
                // Update content for different announcement types
                if (announcement.content !== 'default') {
                    updateContentForType(announcement.content);
                }
            }
        }

        // Update content based on announcement type
        function updateContentForType(type) {
            const contentElement = document.getElementById('announcement-content');
            
            switch (type) {
                case 'policy':
                    contentElement.innerHTML = `
                        <h3 class="text-base font-semibold mb-3 text-gray-800">协议更新概要</h3>
                        <p class="text-sm text-gray-700 mb-4 leading-relaxed">
                            为了更好地保护商家权益，提升平台服务质量，我们对《商家服务协议》进行了重要更新。
                        </p>
                        <h3 class="text-base font-semibold mb-3 text-gray-800">主要更新内容</h3>
                        <ul class="text-sm text-gray-700 mb-4 space-y-2">
                            <li>• 新增商家权益保护条款</li>
                            <li>• 优化退换货政策流程</li>
                            <li>• 明确平台责任和义务</li>
                            <li>• 完善争议解决机制</li>
                        </ul>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
                            <p class="text-sm text-blue-700">
                                <i class="fas fa-info-circle mr-2"></i>
                                新协议将于2025年1月10日正式生效，请所有商家仔细阅读并确认同意。
                            </p>
                        </div>
                    `;
                    break;
                    
                case 'feature':
                    contentElement.innerHTML = `
                        <h3 class="text-base font-semibold mb-3 text-gray-800">功能介绍</h3>
                        <p class="text-sm text-gray-700 mb-4 leading-relaxed">
                            商家后台新增商品批量编辑功能，大幅提升商品管理效率。
                        </p>
                        <h3 class="text-base font-semibold mb-3 text-gray-800">支持功能</h3>
                        <ul class="text-sm text-gray-700 mb-4 space-y-2">
                            <li>• 批量修改商品价格</li>
                            <li>• 批量调整库存数量</li>
                            <li>• 批量编辑商品规格</li>
                            <li>• 批量上下架操作</li>
                        </ul>
                        <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
                            <p class="text-sm text-green-700">
                                <i class="fas fa-rocket mr-2"></i>
                                立即前往商品管理页面体验新功能！
                            </p>
                        </div>
                    `;
                    break;
                    
                default:
                    // Keep default content
                    break;
            }
        }

        // Share announcement
        function shareAnnouncement() {
            if (navigator.share) {
                navigator.share({
                    title: document.getElementById('announcement-title').textContent,
                    text: '查看最新平台公告',
                    url: window.location.href
                });
            } else {
                const tempInput = document.createElement('input');
                tempInput.value = window.location.href;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                showToast('链接已复制到剪贴板');
            }
        }

        // Join activity
        function joinActivity() {
            if (confirm('确认报名参加双11大促活动？\n\n报名后需遵守活动规则，确保库存充足。')) {
                alert('报名成功！\n\n我们的客服专员将在24小时内联系您，协助完成活动准备工作。');
                showToast('报名成功，请关注后续通知');
            }
        }

        // Contact support
        function contactSupport() {
            alert('客服咨询\n\n工作时间：9:00-21:00\n咨询热线：400-888-0000\n在线客服：即将为您转接...');
        }

        // View rules
        function viewRules() {
            alert('活动规则\n\n1. 商家需保证商品质量和库存充足\n2. 严禁虚假宣传和价格欺诈\n3. 遵守平台价格政策\n4. 及时处理客户咨询和售后\n\n详细规则请查看活动协议');
        }

        // Navigate to announcement detail
        function viewAnnouncementDetail(announcementId) {
            window.location.href = 'announcement-detail.html?id=' + announcementId;
        }

        // Show toast message
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            loadAnnouncementContent();
        });
    </script>
</body>
</html>